
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>LayUI JSON Viewer</title>
  <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css">
  <style>
    .json-container {
      padding: 15px;
      background: #f8f8f8;
      border-radius: 4px;
      max-height: 70vh;
      overflow: auto;
      font-family: Consolas, Monaco, monospace;
      line-height: 1.5;
    }
    .json-key {
      color: #92278f;
      font-weight: bold;
    }
    .json-string {
      color: #3ab54a;
      white-space: pre-wrap;
      word-break: break-word;
      word-wrap: break-word;
    }
    .json-number { color: #25aae2; }
    .json-boolean { color: #f98280; }
    .json-null { color: #f1592a; }
    .json-collapse {
      cursor: pointer;
      display: inline-block;
      width: 14px;
      text-align: center;
    }
    .json-line {
      display: block;
      min-height: 20px;
    }
    .json-hidden { display: none; }
  </style>
</head>
<body>
  <button id="showJsonBtn" class="layui-btn">显示JSON数据</button>

  <script src="https://unpkg.com/layui@2.6.8/dist/layui.js"></script>
  <script>
    layui.use(['layer'], function(){
      var layer = layui.layer;

      // 示例数据（含长字符串）
      var jsonData = {
        "status": "success",
        "longText": "这是一个非常长的字符串用于测试自动换行功能，当内容超过容器宽度时应该自动换行显示而不是出现横向滚动条。字符串包含中文和英文混合内容：This is a very long string with both Chinese and English content to test the auto line break feature.",
        "data": {
          "user": {
            "id": 10086,
            "profile": "https://example.com/very/long/url/path/that/needs/to/be/wrapped/properly/in/the/container",
            "description": "这是一个超长的描述文本，用于测试自动换行功能。当文本内容超过容器宽度时应该自动换行显示，而不是出现横向滚动条或者截断显示。"
          },
          "system": {
            "config": {
              "features": ["ssl", "compression", "caching", "authentication", "authorization"]
            }
          }
        }
      };

      // 格式化JSON并添加交互功能
      function formatJson(data, indent) {
        indent = indent || 0;
        var html = '';
        var spaces = ' '.repeat(indent);

        if (Array.isArray(data)) {
          if (data.length === 0) return '[]';
          html += '[<span class="json-collapse" onclick="toggleJson(this)">▼</span><div class="json-content">';
          data.forEach(function(item, i) {
            html += '<div class="json-line">' + spaces + '  ' + formatJson(item, indent + 2);
            if (i < data.length - 1) html += ',';
            html += '</div>';
          });
          html += '</div><div class="json-line">' + spaces + ']</div>';
          return html;
        }
        else if (typeof data === 'object' && data !== null) {
          var keys = Object.keys(data);
          if (keys.length === 0) return '{}';
          html += '{<span class="json-collapse" onclick="toggleJson(this)">▼</span><div class="json-content">';
          keys.forEach(function(key, i) {
            var value = data[key];
            html += '<div class="json-line">' + spaces + '  <span class="json-key">"' + key + '"</span>: ' +
                    formatJson(value, indent + 2);
            if (i < keys.length - 1) html += ',';
            html += '</div>';
          });
          html += '</div><div class="json-line">' + spaces + '}</div>';
          return html;
        }
        else if (typeof data === 'string') {
          return '<span class="json-string">"' + data.replace(/"/g, '\\"') + '"</span>';
        }
        else if (typeof data === 'number') {
          return '<span class="json-number">' + data + '</span>';
        }
        else if (typeof data === 'boolean') {
          return '<span class="json-boolean">' + data + '</span>';
        }
        else if (data === null) {
          return '<span class="json-null">null</span>';
        }
      }

      // 全局折叠函数
      window.toggleJson = function(elem) {
        var content = elem.parentNode.querySelector('.json-content');
        if (content.style.display === 'none') {
          content.style.display = '';
          elem.innerHTML = '▼';
        } else {
          content.style.display = 'none';
          elem.innerHTML = '▶';
        }
      };

      // 显示弹窗
      document.getElementById('showJsonBtn').onclick = function() {
        layer.open({
          type: 1,
          title: 'JSON数据查看器',
          area: ['800px', '600px'],
          shadeClose: true,
          content: '<div class="json-container">' + formatJson(jsonData) + '</div>',
          btn: ['关闭'],
          success: function(layero) {
            // 初始展开第一层级
            layero.find('.json-content').each(function() {
              if (this.parentNode === layero.find('.json-container')[0]) {
                this.style.display = '';
              } else {
                this.style.display = 'none';
                this.previousElementSibling.innerHTML = '▶';
              }
            });
          }
        });
      };
    });
  </script>
</body>
</html>
